<!-- 电子签章配置 -->
<template>
  <el-container class="electronicSign">
    <!-- <el-header height="36px">
      <header-title :title="$route.meta.title" />
    </el-header> -->
    <el-main class="mainDetails">
      <div class="electronicSignConfig">
        <div class="left">
          <CascadeArea ref="cascadeAreaRef" @checkUnit="checkUnit" />
        </div>
        <div class="right">
          <SearchPanel title="查询条件">
            <div ref="queryFormBox" class="search-flex-box">
              <MyForm
                ref="formRef"
                v-model="queryParams"
                :form-option="formOption"
                :select-list="dicLists"
                @handleEvent="handleEvent"
              />
              <div class="searchBtn">
                <el-button type="primary" class="pms-button-primary" @click="doSearch">查询</el-button>
                <!-- <el-button size="mini" class="pms-button" @click="resetSearch">重置</el-button> -->
              </div>
            </div>
          </SearchPanel>
          <SearchList title="查询结果" style="margin-top: 16px">
            <template #header-btn>
              <BtnConfig ref="btnConfigRef" :btn-configs="btnOption" @propClick="btnClick" />
            </template>
            <template #body>
              <MyTable
                id="id"
                ref="myTableRef"
                :table-data="tableData"
                :columns="colOption"
                :col-option-enum="dicLists"
              />
              <pagination
                v-if="pageParam.total > 10"
                :total="pageParam.total"
                :page.sync="pageParam.pageNum"
                :limit.sync="pageParam.pageSize"
                @pagination="doSearch"
              />
            </template>
          </SearchList>
        </div>
        <el-dialog
          v-if="dialogFormVisible"
          v-dialogDrag
          :title="dialogTitle"
          :append-to-body="true"
          :modal-append-to-body="true"
          :modal="true"
          :close-on-click-modal="false"
          :lock-scroll="true"
          width="50%"
          class="pms-dialog"
          :visible.sync="dialogFormVisible"
        >
          <div class="dialogForm">
            <AddSignConfig ref="addSignConfigRef" :edit-check-id="editCheckId" :item-info="itemInfo" :multiple-limit="multipleLimit" />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="pms-button-primary" size="mini" @click="submitForm">确 定</el-button>
            <el-button type="primary" class="pms-button-primary" @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog
          v-if="dialogTableVisible"
          v-dialogDrag
          title="指标说明"
          :append-to-body="true"
          :modal-append-to-body="true"
          :modal="true"
          :close-on-click-modal="false"
          :lock-scroll="true"
          class="pms-dialog"
          :visible.sync="dialogTableVisible"
        >
          <p>1、本页配置为电子签章试点单位配置，配置相关规则后该节点中对应的文件类型需强制开启电子签章</p>
          <p>2、若某节点上的文件后期无需执行电子签章时，需将该规则移除即可</p>
          <p>3、文件获取方式：手动上传、系统生成、系统生成/手动编辑，该功能仅支持对手动上传的文件进行配置</p>
          <p>4、系统生成或系统生成/手动编辑的文件如需盖章则在详情页点击【指派签署人】按钮，对是否电子签章字段选择“是”</p>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// import HeaderTitle from '@/components/basic/HeaderTitle'
import MyForm from '@/components/basic/myForm'
import SearchPanel from '@/components/basic/SearchPanel'
import SearchList from '@/components/basic/SearchList'
import MyTable from '@/components/basic/myTable'
import CascadeArea from './cascadeArea.vue'
import SysConst from '@/common/const'
import AddSignConfig from './addSignConfig.vue'
import BtnConfig from '@/components/basic/btnConfig.vue'
import { formOption, colOption, btnOption, dialogOption } from './index' // addFormOption
import { getListApi, addApi, updateApi, deleteApi, queryDocTypeApi } from '@/api/attachManagement/electronicSign/electronicSignConfig'
import { getDropdownData } from '@/api/common' // 字典接口
import { getPrjStageApi, getPrjNodeNameApi } from '@/api/attachmentInfo'

export default {
    name: 'ElectronicSignConfig',
    components: {
        // HeaderTitle,
        MyForm,
        SearchPanel,
        SearchList,
        MyTable,
        AddSignConfig,
        CascadeArea,
        BtnConfig
    },
    data() {
        return {
            formOption, // 表单配置项
            queryParams: {}, // 查询条件数据
            chooseUnit: '', // 所选单位 默认全国10000000
            tableData: [], // 附件列表数据
            colOption, // 附件表头
            btnOption, // 表格操作按钮,
            dialogTitle: '新增', // 弹框标题
            dialogOption, // 弹框表单
            multipleLimit: 0, // 文件类型选择数量
            dialogData: {}, // 弹框数据
            dialogFormVisible: false, // 新增/编辑弹框
            dialogTableVisible: false, // 规则配置说明弹框
            dicLists: {}, // 下拉框字典选项集合id
            editCheckId: null, // 编辑时所选中数据的id
            itemInfo: {}, // 列表数据项信息
            // 分页信息
            pageParam: {
                pageSize: SysConst.PAGESIZE, // 每页显示val条
                pageNum: SysConst.CURRENT_PAGE, // 当前页
                total: SysConst.TOTAL // 总数
            }
        }
    },
    created() {
        this.getDictData()
        this.getPrjStage()
        this.getPrjNodeName('')
        this.queryDocType()
        this.doSearch()
    },
    methods: {
        checkUnit(val) {
            this.chooseUnit = val
            this.doSearch({
                page: this.pageParam.pageNum,
                limit: this.pageParam.pageSize
            })
        },
        // 查看数据
        doSearch(item) {
            console.log(this.queryParams, 'this.queryParams')
            const params = {
                ...this.queryParams,
                orgCode: this.chooseUnit || 10000000,
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE
            }

            getListApi(params).then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                this.tableData = res.data.records
                this.pageParam.total = res.data?.total || 0
                this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
                this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
            })
        },
        // 查询条件事件
        handleEvent(prop, val) {
            console.log(prop, val, 'jbhjjj')
            if (prop === 'prjStage') {
                console.log(prop, val, 'jbhjjj6516')
                this.getPrjNodeName(val)
                this.queryParams.prjNodeId = ''
            }
        },
        // 重置
        // resetSearch() {
        //     this.$refs.formRef.reset()
        //     this.doSearch({
        //         page: 1,
        //         limit: 10
        //     })
        // },
        // 新增提交
        submitForm() {
            const isValid = this.$refs.addSignConfigRef.formValidate()
            const addFormData = this.$refs.addSignConfigRef.fromValue
            if (!isValid) {
              return this.$message.info('信息不完整，请完整填写')
            }
            this.editCheckId ? this.editPort({ id: this.editCheckId, orgCode: this.chooseUnit || 10000000, ...addFormData }) : this.addPort({ orgCode: this.chooseUnit || 10000000, ...addFormData })
        },
        // 调用新增接口
        addPort(params) {
            addApi(params).then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                this.$message.success('新增成功')
                this.dialogFormVisible = false
                this.doSearch()
            })
        },
        // 调用编辑接口
        editPort(params) {
            updateApi(params).then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                console.log(res, '编辑')
                this.$message.success('修改成功')
                this.dialogFormVisible = false
                this.doSearch()
            })
        },
        // 当父组件接收到了子组件this.$emit的通知后就会执行这个方法来接收子组件点击传递过来的数据
        btnClick(fun, row) {
            this[fun](row)
        },
        // 新增
        add() {
            this.dialogTitle = '新增'
            this.editCheckId = null
            this.itemInfo = {}
            this.multipleLimit = 0
            this.dialogFormVisible = true
        },
        // 编辑
        edit(row) {
            console.log(row, 'row--编辑')
            this.dialogTitle = '编辑'
            this.editCheckId = row[0].id
            this.itemInfo = row[0]
            this.multipleLimit = 1
            this.dialogFormVisible = true
        },
        // 删除
        delete(row) {
            console.log(row, '删除--row')
            const params = {
                ids: row.map(item => item.id).join()
            }
            this.$confirm('确认删除, 是否继续?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                cancelButtonClass: 'pms-zr-button',
                confirmButtonClass: 'pms-zr-button-primary',
                type: 'warning'
            }).then(() => {
                this.deleteData(params)
            }).catch(() => {
                console.log('已取消删除')
            })
        },
        // 调用删除接口
        deleteData(params) {
            deleteApi(params).then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                this.doSearch({
                    page: this.pageParam.pageNum,
                    limit: this.pageParam.pageSize
                })
                this.$refs.myTableRef.clearSelection()
                this.$message.success('删除成功!')
            })
        },
        // 规则配置说明
        conDesc(row) {
            this.dialogTableVisible = true
        },
        // 获取下拉框数据
        async getDictData() {
            const arr = ['IS_NEWBUSINESS', 'PROJ_TYPE', 'BUILD_MODES']
            const promises = arr.map(item => getDropdownData(item))
            const results = await Promise.all(promises)
            arr.forEach((item, i) => {
                this.$set(this.dicLists, item, results[i].data ?? [])
            })
        },
        // 获取项目阶段字典
        async getPrjStage() {
            const res = await getPrjStageApi()
            this.$set(this.dicLists, 'PRO_STAGE', res.data ?? [])
        },
        // 获取项目节点字典
        async getPrjNodeName(val) {
            const stageList = val ?? ''
            const res = await getPrjNodeNameApi({ stageList })
            this.$set(this.dicLists, 'PRO_NODE', res.data ?? [])
        },
        // 获取文档类型
        async queryDocType() {
            const res = await queryDocTypeApi({ nodeId: '' })
            this.$set(this.dicLists, 'DOC_TYPE', res.data ?? [])
        }
    }
}
</script>

<style lang="scss" scoped>
.electronicSign {
    width: 100%;
}
.electronicSignConfig {
    display: flex;
    .left {
        width: 18%;
        max-height: 650px;
        margin-right: 4px;
        overflow: auto;
        border: 1px solid #e5e5e5;
    }
    .right {
        width: 82%;
    }
}
.search-flex-box {
    // display: flex;
    // justify-content: space-between;
    height: auto;
}
.searchBtn {
    width: 100px;
    display: flex;
    margin-top: 4px;
    margin-left: auto;
    flex-direction: column;
    .el-button + .el-button {
        margin-left: 0;
        margin-top: 12px;
    }
}

.mainDetails {
    padding: 0 25px;
}
// 滚动条样式
::v-deep .left::-webkit-scrollbar {
  // 滚动条整体样式
  width: 6px; //高宽分别对应横竖滚动条的尺寸
  height: 10px;
}
::v-deep .left::-webkit-scrollbar-thumb {
  // 滚动条里面小方块
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #f2f3f5;
}

.dialogForm {
    width: 100%;
    margin-top: 10px;
}

.el-button--primary {
    color: #fff;
}
</style>
